มีอะไรใหม่ในเว็บ

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

Rachel Andrew

เผยแพร่เมื่อวันที่ 20 พฤษภาคม 2025

ในงาน Google I/O 2025 หัวข้อ "มีอะไรใหม่ในเว็บ" ได้แชร์ประกาศทั้งหมดเกี่ยวกับ Baseline พร้อมกับตัวอย่างฟีเจอร์บางส่วนที่เป็นส่วนหนึ่งของ Baseline ในปีนี้ ปีนี้ถือเป็นปีที่น่าทึ่งสำหรับเว็บและ Baseline โพสต์นี้เป็นสรุปของทุกสิ่งที่ได้พูดถึงพร้อมลิงก์ทั้งหมดสำหรับดูข้อมูลเพิ่มเติม

แดชบอร์ดแพลตฟอร์มเว็บและฟีเจอร์บนเว็บ

ในปี 2024 เราได้ประกาศเปิดตัวแดชบอร์ดแพลตฟอร์มเว็บครั้งแรก ซึ่งใช้ชุดข้อมูลฟีเจอร์ของเว็บ ให้คุณสำรวจฟีเจอร์ทั้งหมดที่เป็นส่วนหนึ่งของ Baseline ได้

ข้อมูลฟีเจอร์ของเว็บพร้อมใช้งานแล้ว โดยมีการแมปฟีเจอร์ทั้งหมดของแพลตฟอร์ม เมื่อฟีเจอร์ใหม่เข้าร่วมฐานข้อมูลตามเกณฑ์ในแต่ละเดือน ระบบจะอัปเดตข้อมูลและแสดงข้อมูลทั้งหมดในแดชบอร์ด

เครื่องมือที่จะช่วยให้คุณค้นพบเป้าหมายพื้นฐานของคุณเอง

แม้ว่าคุณอาจกำหนดนโยบายการสนับสนุนเบราว์เซอร์ตามเป้าหมายแบบเลื่อนของ "พร้อมให้บริการในวงกว้างตามเกณฑ์พื้นฐาน" เช่น เอเจนซี Clearleft ในสหราชอาณาจักร แต่คุณก็ใช้เป้าหมายแบบคงที่ตามปีฐานได้ด้วย ตอนนี้คุณใช้ข้อมูลผู้ใช้ของคุณเองร่วมกับข้อมูลฟีเจอร์ของเว็บเพื่อค้นหาเป้าหมายที่ดีที่สุดได้แล้ว

เมื่อปีที่แล้วที่งาน I/O เราได้ประกาศว่า RUMvision จะนำ Baseline ไปใช้กับผลิตภัณฑ์ของตน และการผสานรวมนี้พร้อมใช้งานแล้ว

เนื่องจากใช้ข้อมูล RUM จึงช่วยให้คุณระบุปีที่ใช้เป็นฐานได้โดยอิงตามข้อมูลดังกล่าวแทนค่าเฉลี่ยทั่วโลก ทั้งยังช่วยให้คุณเห็นว่าการเปิดตัว Baseline แบบพร้อมให้บริการในวงกว้างเหมาะกับคุณหรือไม่

นอกจากนี้ คุณยังใช้ข้อมูล Google Analytics เพื่อดูเปอร์เซ็นต์ของผู้ใช้ที่รองรับเป้าหมายพื้นฐานแต่ละรายการได้อย่างชัดเจนด้วยเครื่องมือตรวจสอบพื้นฐานของ Google Analytics ใหม่

เครื่องมือเหล่านี้เป็นเพียง 2 รายการจากคอลเล็กชันเครื่องมือที่เพิ่มมากขึ้นเรื่อยๆ ซึ่งจะช่วยคุณแมปข้อมูลผู้ใช้จริงกับข้อมูลพื้นฐาน

เมื่อเร็วๆ นี้ กลุ่มชุมชน Web DX ได้เปิดตัวส่วนขยายสําหรับ Netlify ที่แสดงการรองรับปีฐานที่แตกต่างกันและพร้อมใช้งานในเว็บไซต์ต่างๆ เพื่อช่วยคุณตัดสินใจเกี่ยวกับสิ่งที่ควรกำหนดเป้าหมายในเครื่องมือสร้าง การผสานรวมกับผลิตภัณฑ์ RUM ของ Observatory จาก Cloudflare และ Contentsquare จะพร้อมให้บริการในเร็วๆ นี้

ผสานรวมข้อมูลกับเครื่องมือของคุณเอง

ข้อมูลฟีเจอร์ของเว็บเป็นแบบเปิดและพร้อมสำหรับการผสานรวมของคุณเอง เราพยายามทำให้การดำเนินการดังกล่าวง่ายขึ้น

ใช้ Web Platform Dashboard API หรือใช้ข้อมูล Web-Features โดยตรงจากแพ็กเกจ npm

ตอนนี้คุณสามารถจับคู่เวอร์ชันเบราว์เซอร์กับเป้าหมายเบสไลน์ได้โดยใช้ข้อบังคับbaseline-browser-mappingจากกลุ่มชุมชน WebDX ของ W3C โมดูลนี้สามารถใช้ในสภาพแวดล้อม JavaScript ฝั่งเซิร์ฟเวอร์ หรือจะดาวน์โหลดไฟล์ JSON หรือ CSV ที่รีเฟรชทุกวันจากที่เก็บก็ได้

ข้อมูลนี้รวมถึงการแมปสำหรับชุดเบราว์เซอร์ Baseline หลักเท่านั้น แต่ยังรวมถึงเบราว์เซอร์ดาวน์สตรีม เช่น Samsung Internet, Opera, UC Browser และ Android WebView ด้วย

ดูว่าเป้าหมาย Baseline รองรับฟีเจอร์หรือไม่

ข้อมูลพื้นฐานมีอยู่ในหน้า MDN และหน้า "ฉันใช้ได้ไหม" ส่วนใหญ่แล้ว และยังดูได้ในแดชบอร์ดแพลตฟอร์มเว็บ รวมถึงบทความใน web.dev และ CSS Tricks อย่างไรก็ตาม คุณต้องขอรับการสนับสนุน การแสดงข้อมูลพื้นฐานใน IDE ขณะที่คุณเขียนโค้ดและเป็นส่วนหนึ่งของเครื่องมืออื่นๆ ที่คุณใช้จะมีประโยชน์มากกว่า

เรายินดีที่จะแจ้งให้ทราบว่าตอนนี้เครื่องมือหลักๆ หลายรายการมี Baseline ในตัวหรือผสานรวมได้ง่าย

browserslist-config-baseline

เครื่องมือจํานวนมาก เช่น Babel และ PostCSS ใช้ browserslist เพื่อระบุเบราว์เซอร์ที่จะรองรับ

ทีม Chrome ได้ร่วมมือกับ CG ของ WebDX และสมาชิกชุมชนเพื่อเปิดตัวเครื่องมือใหม่ชื่อ browserslist-config-baseline ซึ่งจะช่วยให้คุณกําหนดค่าเป้าหมาย browserslist โดยใช้คําศัพท์พื้นฐาน เช่น ใช้งานได้อย่างแพร่หลายหรือปีฐาน

ด้วยเหตุนี้ เครื่องมือใดก็ตามที่ใช้เป้าหมาย browserslist จะแสดงผลในแง่ของ Baseline ได้

ดูข้อมูลเพิ่มเติมได้ที่ใช้ Baseline กับ browserslist

เกณฑ์พื้นฐานในโปรแกรมตรวจไวยากรณ์ ได้แก่ ESLint และ Stylelint

เมื่อเร็วๆ นี้ เราได้เปิดใช้ Baseline กับโปรแกรมตรวจไวยากรณ์ด้วยเครื่องมือใหม่ 2-3 อย่างในพื้นที่โปรแกรมตรวจไวยากรณ์ โดยเริ่มจาก ESLint สำหรับ CSS

Baseline ESLint มีกฎ use-baseline คุณสามารถตั้งค่านี้เป็นเป้าหมายพื้นฐานที่ต้องการได้ และระบบจะเตือนคุณเมื่อใช้ฟีเจอร์ที่ใหม่กว่าเป้าหมาย คุณเลือกวิธีแก้ไขคำเตือนได้ 2 วิธี ได้แก่ แทนที่ฟีเจอร์นั้นด้วยพรอมิเทีฟ หรือระงับคำเตือนของโปรแกรมตรวจสอบไวยากรณ์ ซึ่งถือเป็นวิธีแก้ปัญหาที่ถูกต้องที่สุดเมื่อคุณรู้ว่ากำลังใช้ฟีเจอร์ล้ำสมัยอย่างปลอดภัย เช่น ในกรณีที่เป็นการเพิ่มประสิทธิภาพแบบเป็นขั้นเป็นตอน

โดยค่าเริ่มต้น ESLint จะไม่เตือนหากมีการใช้ฟีเจอร์ใหม่ภายใน@supports บล็อก เนื่องจากเบราว์เซอร์ที่ไม่รองรับจะไม่ประเมินฟีเจอร์เหล่านั้นอยู่แล้ว

หากต้องการใช้โปรแกรมตรวจไวยากรณ์ HTML ยังมีปลั๊กอินชุมชนชื่อ html-eslint ด้วย

Stylelint รองรับปลั๊กอินชื่อ stylelint-plugin-use-baseline อย่างเป็นทางการ กฎนี้ทํางานเหมือนกับกฎ ESLint สําหรับ CSS แต่ทํางานบน Stylelint แทน

โปรแกรมตรวจไวยากรณ์จำนวนมากยังมีปลั๊กอิน IDE ด้วย คุณจึงได้รับความคิดเห็นเกี่ยวกับสถานะพื้นฐานทันทีขณะเขียนโค้ดผ่านขีดล่างขดๆ

ข้อมูลพื้นฐานใน VS Code และ JetBrains WebStorm

IDE หลายตัวรองรับวิธีวางเมาส์เหนือฟีเจอร์ในเครื่องมือแก้ไขและดูรายการเวอร์ชันเบราว์เซอร์ที่รองรับมาอย่างยาวนาน

แต่อาจเป็นเรื่องยากที่จะเข้าใจว่าฟีเจอร์นั้นปลอดภัยที่จะใช้จริงหรือไม่ คุณจะต้องแยกแยะว่าเบราว์เซอร์หลักๆ ใดหายไปจากรายการนั้นบ้าง และเบราว์เซอร์เวอร์ชันนั้นใหม่แค่ไหน

ในการแก้ไขปัญหานี้ เราจึงร่วมมือกับ VS Code ซึ่งเป็น IDE ที่ได้รับความนิยมสูงสุดซึ่งนักพัฒนาเว็บหลายล้านคนใช้ เพื่อผสานรวมข้อมูลพื้นฐานลงในโฮเวอร์การ์ดเหล่านี้โดยตรง

ตอนนี้คุณสามารถวางเมาส์เหนือฟีเจอร์เพื่อดูว่าฟีเจอร์นั้นถือเป็น Baseline หรือไม่ และนานเท่าใด หรือมีเบราว์เซอร์หลักใดบ้างที่ยังไม่ได้ใช้งานฟีเจอร์นั้นอย่างเต็มรูปแบบ

ฟีเจอร์ที่รองรับ ได้แก่ พร็อพเพอร์ตี้ CSS, องค์ประกอบ HTML และแอตทริบิวต์ HTML ดูข้อมูลเพิ่มเติมในตอนนี้ Visual Studio Code รองรับ Baseline แล้ว

การผสานรวมนี้หมายความว่า IDE ที่ใช้ VS Code จะได้รับประโยชน์จากโฮเวอร์การ์ดเหล่านี้ด้วย

นอกจากนี้ เรายังประกาศได้ว่า JetBrains กำลังนำโฮเวอร์การ์ดไปใช้ใน IDE ของ WebStorm JavaScript และ TypeScript

เว็บพัฒนาเร็วขึ้นกว่าที่เคย

เราหวังว่า Baseline จะช่วยให้คุณใช้ประโยชน์จากข้อเท็จจริงที่ว่าเว็บที่ทำงานร่วมกันได้กำลังพัฒนาเร็วขึ้นกว่าที่เคย

คุณสามารถใช้แดชบอร์ดแพลตฟอร์มเว็บเพื่อดูฟีเจอร์ทั้งหมดที่กลายเป็นฟีเจอร์ใหม่ใน Baseline ในช่วง12 เดือนที่ผ่านมานับตั้งแต่ Google I/O 2024

นอกจากนี้ คุณยังมั่นใจได้ว่าฟีเจอร์หลายรายการจะพร้อมใช้งานใน Baseline เวอร์ชันใหม่ในเร็วๆ นี้ เนื่องจากฟีเจอร์เหล่านี้รวมอยู่ในโปรเจ็กต์ Interop 2025 คุณสามารถอ่านเกี่ยวกับฟีเจอร์ทั้งหมดที่รวมอยู่ใน Interop2025: อีกปีที่ปรับปรุงแพลตฟอร์มเว็บ

โหมดการเขียนแนวนอน

เราได้เห็นว่าฟีเจอร์หนึ่งกลายเป็น "พร้อมใช้งานใน Baseline ใหม่" แล้ว ซึ่งก็คือค่า sideways-rl และ sideways-lr สำหรับพร็อพเพอร์ตี้ writing-mode ของ CSS หากคุณใช้โหมดการเขียนแนวตั้งเพื่อวัตถุประสงค์ด้านเลย์เอาต์เท่านั้น คุณอาจต้องใช้ค่าแนวนอน

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

ตำแหน่งโฆษณา Anchor

ตำแหน่งที่ยึด มีให้ใช้งานใน Chrome 125 ซึ่งช่วยให้คุณเชื่อมโยงตําแหน่งขององค์ประกอบกับจุดยึดได้ เช่น เมื่อเปิดเคล็ดลับเครื่องมือด้วยปุ่ม

ตอนนี้ได้รวมอยู่ใน Interop 2025 แล้ว เราจึงน่าจะได้เห็นการเข้าร่วม Baseline ในปีนี้

Core Web Vitals: LCP และ INP

LCP API

Event Timing API (สําหรับ INP)

Web Vitals ช่วยให้คุณวัดประสบการณ์ของเว็บไซต์และระบุโอกาสในการปรับปรุงได้ โครงการริเริ่ม Web Vitals มีจุดมุ่งหมายเพื่อลดความซับซ้อนของภาพรวม และช่วยให้เว็บไซต์มุ่งเน้นที่เมตริกที่สําคัญที่สุดอย่าง Core Web Vitals

Interop 2025 มีเมตริก Largest Contentful Paint (LCP) และ Interaction to Next Paint (INP) โดยใช้ LargestContentfulPaint API และ Event Timing API ในเบราว์เซอร์ต่างๆ

การปรับปรุงองค์ประกอบ <details>

องค์ประกอบ <details> นั้นพร้อมใช้งานในวงกว้างในรุ่นเบสไลน์อยู่แล้ว <details>รวมอยู่ใน Interop 2025 เนื่องจากมีฟีเจอร์หลายอย่างที่ทําให้วิดเจ็ตการเปิดเผยข้อมูลที่มี <details> มีประโยชน์มากขึ้น

องค์ประกอบ <details> มีองค์ประกอบ <summary> ซึ่งเป็นส่วนที่มองเห็นในหน้าเว็บเมื่อองค์ประกอบ <details> ยุบอยู่ ภายนอก <summary> คือเนื้อหาขององค์ประกอบ <details> ซึ่งจะซ่อนอยู่จนกว่าผู้ใช้จะคลิกสรุป

หนึ่งในสิ่งที่กำลังทำให้ทำงานร่วมกันได้ในระหว่าง Interop 2025 คือซ่อนเนื้อหาโดยใช้ content-visibility แทน display ซึ่งหมายความว่าหากไม่ได้ขยาย เนื้อหาจะไม่แสดงผลเลย

นอกจากนี้ ::markerองค์ประกอบจำลองยังเป็นส่วนหนึ่งของโครงการ Interop 2025 ด้วย องค์ประกอบเสมือน ::marker ช่วยให้คุณจัดสไตล์รูปสามเหลี่ยมการเปิดเผยขององค์ประกอบ <summary> ได้

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

จากนั้นเป็นองค์ประกอบจำลองอีกรายการหนึ่ง ::details-content

::details-content แสดงเนื้อหา ซึ่งเป็นส่วนขององค์ประกอบรายละเอียดที่ขยายและยุบ และให้คุณจัดรูปแบบได้

[open]::details-content {
  border: 5px dashed hotpink;
}

นอกจากนี้ เรายังมีการปรับปรุงดีๆ อีก เช่น การขยายองค์ประกอบ <details> แบบอัตโนมัติเมื่อมีรายการที่ตรงกันซึ่งพบในหน้าเว็บ และการเปลี่ยนค่า until-found ของแอตทริบิวต์ HTML hidden เป็น "พร้อมใช้งานใหม่" ในพื้นฐาน ซึ่งจะซ่อนองค์ประกอบจนกว่าจะพบโดยใช้การค้นหาในหน้าเว็บของเบราว์เซอร์ หรือจนกว่าผู้ใช้จะไปยังองค์ประกอบนั้นโดยตรงโดยติดตามข้อมูลโค้ด URL

CSS @scope

กฎ @scope ของ CSS ช่วยให้คุณจํากัดการเข้าถึงของตัวเลือกได้ การตั้งค่ารูทที่กําหนดขอบเขตด้วย @scope จะทำให้กฎสไตล์ที่ฝังอยู่ภายใน at-rule มีผลกับต้นไม้ DOM นั้นเท่านั้น

เช่น หากต้องการกําหนดเป้าหมายเฉพาะองค์ประกอบ <img> ภายในองค์ประกอบที่มีคลาส .card .card จะกลายเป็นรูทการกําหนดขอบเขต

@scope (.card) {
    img {
        border-color: green;
    }
}

ดูข้อมูลเพิ่มเติมในหัวข้อจำกัดการเข้าถึงของตัวเลือกด้วยแอตทริบิวต์ @scope ของ CSS

scrollend

ฟีเจอร์อีกอย่างที่ลดความซับซ้อนและปรับปรุงอินเทอร์เฟซการเลื่อนคือ scrollend หากไม่มีเหตุการณ์ scrollend ก็จะไม่มีวิธีที่น่าเชื่อถือในการตรวจจับว่าการเลื่อนเสร็จสมบูรณ์แล้ว

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

เมื่อใช้เหตุการณ์ scrollend เบราว์เซอร์จะประเมินสิ่งต่างๆ ที่ยากๆ ทั้งหมดให้คุณ

document.onscrollend = event => {…}

ดูตัวอย่างเพิ่มเติมใน Scrollend ซึ่งเป็นเหตุการณ์ JavaScript ใหม่

การเปลี่ยนมุมมองในเอกสารเดียวกัน

สุดท้ายแต่ไม่ท้ายสุดคือการเปลี่ยนมุมมองเป็นส่วนหนึ่งของ Interop 2025 งานเกี่ยวข้องกับการเปลี่ยนมุมมองในเอกสารเดียวกัน ดังนั้นจึงเกี่ยวข้องกับแอปแบบหน้าเดียวและคลาสการเปลี่ยนมุมมองด้วย

ติดตามข้อมูลในหน้าแดชบอร์ด Interop 2025 เพื่อดูว่าโปรเจ็กต์พัฒนาไปอย่างไรตลอดทั้งปี

ฟีเจอร์ที่รวมอยู่ใน Interop 2025 ไม่ได้เป็นเพียงฟีเจอร์เดียวที่จะเป็นส่วนหนึ่งของ Baseline ในปีนี้ แต่การรวมฟีเจอร์เหล่านี้ไว้ในโปรเจ็กต์เป็นสัญญาณที่ดีว่าฟีเจอร์เหล่านี้มีความสำคัญและจะพร้อมใช้งานเร็วๆ นี้

เราเพิ่งเริ่มดำเนินการ

ปีนี้ถือเป็นปีที่น่าตื่นเต้นสําหรับ Baseline และเราก้าวหน้าไปมากจากประกาศเมื่อปีที่แล้ว ตอนนี้เราทดแทนข้อมูลฟีเจอร์ของเว็บเสร็จแล้ว การดำเนินการนี้เปิดโอกาสให้นักพัฒนาแอปสร้างเครื่องมือต่างๆ ได้ เราเพิ่งเริ่มต้นใช้งานฟีเจอร์นี้ และยินดีรับฟังจากคุณหากคุณมีผลิตภัณฑ์หรือเครื่องมือโอเพนซอร์สที่จะได้รับประโยชน์จากการรวมข้อมูลนี้

โปรดติดตาม web.dev เนื่องจากเราจะเผยแพร่ประกาศเกี่ยวกับเครื่องมือใหม่ๆ อย่างต่อเนื่อง พร้อมบทแนะนำที่จะช่วยให้คุณใช้ประโยชน์จากทุกสิ่งที่เว็บมีให้